<script setup>
import SubjectCard from '/src/components/SubjectCard.vue';
import SearchBar from '/src/components/SearchBar.vue'
import Pagination from '/src/components/Pagination_lxw.vue';
import { useRouter } from 'vue-router';
import {ref} from 'vue'

const router = useRouter()
const total_amount = ref(100)

// SubjectCard's function
// button's text 是 i18n里的内容
const buttons = [
    {
        text: 'hall.subjectCard.operation.apply',
        func: () => {}
    },
    {
        text: 'hall.subjectCard.operation.detail',
        func: getSubjectDetail
    }
]

function getSubjectDetail({subject_id}) {
    router.push({name: 'subject_detail', params:{subject_id}})

}

</script>
<template>
    <div class="subject-hall-home">
        <div class="hall-home-header">
            <div class="title" >
                <h1>课题列表</h1>
                <p style="font-size: 16px;" >在这里 你可以看到可选择的课题信息</p>
            </div>
            <SearchBar />
        </div>
        <div class="hall-home-main">

            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 1}" :buttons="buttons" :params="[{}, {subject_id: 1}]" style="margin: 14px 14px;" />
            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 2}" :buttons="buttons"  :params="[{}, {subject_id: 2}]" style="margin: 14px 14px;" />
            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 3}"  :buttons="buttons" :params="[{}, {subject_id: 3}]" style="margin: 14px 14px;" />
            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 4}" :buttons="buttons" :params="[{}, {subject_id: 4}]" style="margin: 14px 14px;"/>
            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 5}" :buttons="buttons" :params="[{}, {subject_id: 5}]" style="margin: 14px 14px;"/>
            <SubjectCard :course="{courseName: '课程名称', courseIntroduction: '课程简介', courseId: 6}" :buttons="buttons" :params="[{}, {subject_id: 6}]" style="margin: 14px 14px;" />
        </div>
        <div class="hall-home-pagination" >
            <Pagination :total="total_amount" />
        </div>
        
    </div>
    


</template>
<style scoped>
.subject-hall-home {
    display: flex; 
    justify-content: center; 
    align-items: center; 
    top: 80px; 
    flex-wrap: wrap; 
    width: 100%;
    padding: 0px 89px;
    
}

.hall-home-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 20px 14px;
    flex-wrap: wrap; 
    
}

.hall-home-header h1, p {
    font-family: Source Han Sans CN;
	font-size: 30px;
    color: #707070;
    margin: 10px 0px;
}

.hall-home-main {
    display: flex;
    align-items: center;
    flex-wrap: wrap;  
    width: 100%;
}

.hall-home-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 20px 0px;
}

</style>